<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
    <script src="./js/jq.js"></script>
</head>

<body>
    <div class="p24">
        <div class="notice"><img src="./static/image/1.svg" alt=""></div>
        <div class="title1">Good evening</div>
        <div class="title2">Where to next?</div>
        <div class="search flex_x start"><img class="ml_20 mr_20" src="./static/image/2.svg" alt=""><span>Find a
                flight</span></div>
        <div class="flex_x around">
            <a href="./ManageBooking.html">
                <div class="h_item h1 txt_center">
                    <img src="./static/image/3.svg" alt="">
                </div>
                <div class="txt_center font_10">Manage Booking</div>
            </a>
            <a href="./BoardingPass.html">
                <div class="h_item h2   txt_center">
                    <img src="./static/image/4.svg" alt="">
                </div>
                <div class="txt_center font_10">Boarding Pass</div>
            </a>
            <a href="./MobileCheckIn.html">
                <div class="h_item h3   txt_center">
                    <img src="./static/image/5.svg" alt="">
                </div>
                <div class="txt_center font_10">Mobile Check-in</div>
            </a>


        </div>
        <div class="title1 mt_20">Promotions</div>
        <div class="carousel-card">
            <div class="carousel-card-item">
                <img src="./static/image/l1.png">
            </div>
            <div class="carousel-card-item">
                <img src="./static/image/233.png">
            </div>
            <div class="carousel-card-item">
                <img src="./static/image/234.png">

            </div>
           
           

        </div>
    </div>
    <div class="bottom flex_x around bg_ff">
        <img src="./static/image/Vector (1).svg" alt="">
        <a href="./Exploring.html"><img src="./static/image/Vector (2).svg" alt=""></a>
       <a href="./mine.html"> <img src="./static/image/Vector (3).svg" alt=""></a>
    </div>
</body>
<script src="./card.js"></script>
<script>
     gsap.from(".h1>img", {
        duration: .5,
        y: 20,
    });
    gsap.from(".h2>img", {
        duration: .5,
        y: 20,
    });
    gsap.from(".h3>img", {
        duration: .5,
        y: 20,
    });
    
    gsap.from(".notice>img", {
        duration: .5,
        y: 60,
    });

</script>
<style>
    .carousel-card {
        margin-top: 50px;
        height: 400px
    }

    .carousel-card-item {
        border-radius: .5vw;
        overflow: hidden
    }

    .carousel-card-item img {
        width: 100%;
        height: 100%;
    }

    .h_item {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        line-height: 58px;
        text-align: center;
        margin: 10px auto;
    }

    .h_item img {
        width: 24px;
        height: 23px;
        margin: 0 auto;
    }

    .h1 {
        background: #5A6BEC;
    }

    .h2 {
        background: #F77467;
    }

    .h3 {
        background: #FF8906;
    }

    .search {
        width: 338px;
        height: 46px;
        border-radius: 40px;
        background: #FFF;
        margin: 30px auto;
        align-items: center;
    }

    .search img {
        width: 14px;
        height: 14px;
    }

    .search span {
        color: #C2C2C2;
        font-size: 15px;
    }

    .notice {
        text-align: right;
    }

    .notice img {
        width: 12px;
        height: 14.609px;
    }

    .title1 {
        font-size: 24px;
        margin-bottom: 11px;
    }

    .title2 {
        font-size: 15px;
    }
</style>

</html>